@import "../../common/less/theme";

.search {
	.s-header {
		position  : fixed;
		top       : 0;
		left      : 0;
		width     : 100%;
		box-sizing: border-box;
		padding   : 0 28rpx;
		background: white;
		z-index   : 10;

		.h-top {
			display    : flex;
			align-items: center;
			height     : 88rpx;

			.t-search {
				display      : flex;
				align-items  : center;
				flex         : 1;
				height       : 60rpx;
				border-radius: 8rpx;
				background   : #f4f4f4;

				text {
					flex-basis : 65rpx;
					text-align : center;
					line-height: 60rpx;
					color      : #999;
				}

				input {
					flex      : 1;
					border    : none;
					outline   : none;
					background: #f4f4f4;

					&::-webkit-search-cancel-button {
						display: none;
					}
				}

				.clear {
					flex-basis : 65rpx;
					text-align : center;
					line-height: 60rpx;
					font-size  : 40rpx;
					color      : #999;
				}
			}

			.t-right {
				display        : flex;
				justify-content: flex-end;
				flex-basis     : 85rpx;

				text {
					color: #666;
				}
			}
		}

		.h-bottom {
			display    : flex;
			align-items: center;
			height     : 88rpx;

			.b-item {
				display        : flex;
				align-items    : center;
				justify-content: center;
				flex           : 1;
				color          : #666;

				.i-icon {
					display       : flex;
					flex-direction: column;
					align-items   : center;
					padding-left  : 10rpx;

					text {
						font-size: 20rpx;
					}

					&-down {
						text {
							&:last-child {
								color: #b4282d;
							}
						}
					}
				}

				&-active {
					.i-text {
						text {
							color: #9e0000;
						}
					}
				}
			}
		}
	}

	.s-main {
		padding-top: 88rpx;

		&-with-bottom {
			padding-top: 176rpx;
		}

		.m-first {
			.s-section {
				background: #f4f4f4;

				.se-header {
					display        : flex;
					justify-content: space-between;
					height         : 75rpx;
					padding        : 0 28rpx;

					.h-left {
						display    : flex;
						align-items: center;

						text {
							color: #666;
						}
					}

					.h-right {
						display    : flex;
						align-items: center;

						text {
							font-size: 40rpx;
							color    : #666;
						}
					}
				}

				.se-content {
					padding   : 34rpx 28rpx 52rpx 28rpx;
					background: white;

					.f-hot {
						display  : flex;
						flex-wrap: wrap;

						text {
							flex-grow    : 0;
							height       : 50rpx;
							line-height  : 50rpx;
							padding      : 0 22rpx;
							margin       : 0 20rpx 20rpx 0;
							border-radius: 5rpx;
							background   : @body-background;
							color        : #666;
						}
					}

					.f-history {
						display  : flex;
						flex-wrap: wrap;

						text {
							flex-grow    : 0;
							height       : 50rpx;
							line-height  : 50rpx;
							padding      : 0 22rpx;
							margin       : 0 20rpx 20rpx 0;
							box-sizing   : border-box;
							border-radius: 5rpx;
							border       : 1px solid @border-color-split;
							color        : #666;
						}
					}
				}
			}
		}

		.m-second {
			.s-section {
				background: #f4f4f4;

				.se-header {
					display        : flex;
					justify-content: space-between;
					height         : 75rpx;
					padding        : 0 28rpx;

					.h-left {
						display    : flex;
						align-items: center;

						text {
							color: #666;
						}
					}
				}

				.se-content {
					padding   : 34rpx 28rpx 52rpx 28rpx;
					background: white;

					.s-recommend {

						.r-item {
							display: flex;

							.i-pic {
								flex-basis: 110rpx;
								height    : 110rpx;
							}

							.i-info {
								display        : flex;
								flex-direction : column;
								justify-content: center;
								flex           : 1;
								padding        : 0 20rpx;

								.i-name {
									display      : inline-block;
									width        : 100%;
									height       : 40rpx;
									line-height  : 40rpx;
									color        : #333;
									overflow     : hidden;
									text-overflow: ellipsis;
								}

								.i-price {
									padding-top: 10rpx;
									color      : #666;
								}
							}

							.i-buy {
								display    : flex;
								align-items: center;
								flex-grow  : 0;

								text {
									color: @primary-color
								}

								.iconfont {
									font-size: 40rpx;
								}
							}

							&:not(:first-child) {
								margin-top: 10rpx;
							}
						}
					}

					.s-hot {
						.h-item {
							display        : flex;
							justify-content: space-between;
							height         : 88rpx;

							&:not(:first-child) {
								position: relative;

								&::before {
									position  : absolute;
									content   : '';
									top       : 0;
									left      : 0;
									width     : 100%;
									height    : 0;
									border-top: 1px solid @border-color-split;
									transform : scaleY(0.5);
								}
							}

							.i-left {
								display    : flex;
								align-items: center;

								text {
									display      : inline-block;
									width        : 100%;
									height       : 60rpx;
									line-height  : 30rpx;
									color        : #333;
									overflow     : hidden;
									text-overflow: ellipsis;
								}
							}

							.i-right {
								display    : flex;
								align-items: center;

								text {
									color: #666;
								}
							}
						}
					}
				}
			}
		}

		.m-third {
			display  : flex;
			flex-wrap: wrap;

			.t-item {
				position  : relative;
				flex-basis: 50%;
				width     : 0;

				&:nth-child(2n + 1) {
					&::before {
						position    : absolute;
						content     : '';
						top         : 0;
						right       : 0;
						height      : 100%;
						width       : 0;
						border-right: 1rpx solid @border-color-split;
						transform   : scaleX(0.5);
					}
				}
			}
		}
	}
}